<template>
  <layout title="countTo数字跳转">
    <layout-content title="基础使用">
      <tn-count-to start-value="0" end-value="2000"></tn-count-to>
      <view class="tn-margin-top-sm">
        <tn-count-to start-value="0" end-value="2000.12" decimals="2"></tn-count-to>
      </view>
      <view class="tn-margin-top-sm">
        <tn-count-to start-value="0" end-value="2000.12" decimals="2" bold></tn-count-to>
      </view>
    </layout-content>

    <layout-content title="手动控制">
      <view class="tn-col-12 tn-flex-column">
        <view class="tn-col-12 tn-flex-center">
          <tn-count-to ref="countToRef" start-value="0" end-value="2000.12" decimals="2" :autoplay="false"></tn-count-to>
        </view>
        <view class="tn-flex-center tn-margin-top">
          <view><tn-button @click="startCountTo">开始</tn-button></view>
          <view class="tn-margin-left-sm"><tn-button type="danger" @click="pausedCountTo">暂停</tn-button></view>
          <view class="tn-margin-left-sm"><tn-button type="info" @click="resumeCountTo">恢复</tn-button></view>
        </view>
      </view>
    </layout-content>

    <layout-content title="自定义分隔符">
      <tn-count-to start-value="0" end-value="2000.12" decimals="2" :separator-option="customSeparator"></tn-count-to>
    </layout-content>

    <layout-content title="设置颜色">
      <tn-count-to start-value="0" end-value="2000.12" decimals="2" color="tn-color-gray"></tn-count-to>
    </layout-content>
  </layout>

  <layout-doc v-model="showDoc" :content="docContent"></layout-doc>
  <doc-fab @click="handleDocFabClick"/>
</template>

<script lang="ts" setup>
import { CSSProperties, ref } from 'vue'
import { docContent } from './lib/doc'
import Layout from '@/components/layout/index.vue'
import LayoutContent from '@/components/layout/content.vue'
import LayoutDoc from '@/components/layout/doc.vue'
import DocFab from '@/components/doc-fab/index.vue'

import TnCountTo from '@/tuniao-ui/components/tn-count-to/src/CountTo.vue'
import { CountToSeparator } from '@/tuniao-ui/types'
import TnButton from '@/tuniao-ui/components/tn-button/src/Button.vue'

// 弹出文档 
let showDoc = ref<boolean>(false)
const handleDocFabClick = () => {
  showDoc.value = true
}

// 手动控制
const countToRef = ref<InstanceType<typeof TnCountTo>>()
const startCountTo = () => {
  countToRef.value?.start()
}
const pausedCountTo = () => {
  countToRef.value?.paused()
}
const resumeCountTo = () => {
  countToRef.value?.resume()
}

// 自定义分隔符
const customSeparator: CountToSeparator = {
  decimal: '.',
  thousandths: ','
}
</script>

<style lang="scss" scoped>
</style>
